<template>
	<n-config-provider :theme="$store.user.theme.type === 'dark' ? darkTheme : undefined" :hljs="hljs">
		<n-loading-bar-provider>
			<MyLoading />
			<el-config-provider
				:locale="zhCn"
				:size="size"
				:button="{
					autoInsertSpace: true
				}"
			>
				<RouterView v-slot="{ Component }">
					<Transition name="fade">
						<component :is="Component" />
					</Transition>
				</RouterView>
			</el-config-provider>
		</n-loading-bar-provider>
	</n-config-provider>
</template>

<script setup name="App">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import { darkTheme } from 'naive-ui';

/*****************************************窗口大小******************************/
import { useWindowSize } from '@vueuse/core';
const { width } = useWindowSize();
const size = computed(() => (width.value > 1024 ? 'default' : 'small'));

/*****************************************代码高亮******************************/
import hljs from 'highlight.js/lib/core';
import json from 'highlight.js/lib/languages/json';
import typescript from 'highlight.js/lib/languages/typescript';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('json', json);
hljs.registerLanguage('typescript', typescript);
hljs.registerLanguage('javascript', javascript);
</script>

<style lang="scss">
.n-config-provider {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: var(--el-bg-color);
}
</style>
